<!DOCTYPE html>
<html lang="en-us">
	<head>
		<meta charset="utf-8">
		<!--<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">-->

		<title> SmartAdmin </title>
		<meta name="description" content="">
		<meta name="author" content="">

		<!-- Use the correct meta names below for your web application
			 Ref: http://davidbcalhoun.com/2010/viewport-metatag 
			 
		<meta name="HandheldFriendly" content="True">
		<meta name="MobileOptimized" content="320">-->
		
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

		<!-- Basic Styles -->
		<link rel="stylesheet" type="text/css" media="screen" href="css/bootstrap.min.css">
		<link rel="stylesheet" type="text/css" media="screen" href="css/font-awesome.min.css">

		<!-- SmartAdmin Styles : Please note (smartadmin-production.css) was created using LESS variables -->
		<link rel="stylesheet" type="text/css" media="screen" href="css/smartadmin-production.css">
		<link rel="stylesheet" type="text/css" media="screen" href="css/smartadmin-skins.css">

		<!-- SmartAdmin RTL Support is under construction
		<link rel="stylesheet" type="text/css" media="screen" href="css/smartadmin-rtl.css"> -->

		<!-- We recommend you use "your_style.css" to override SmartAdmin
		     specific styles this will also ensure you retrain your customization with each SmartAdmin update.
		<link rel="stylesheet" type="text/css" media="screen" href="css/your_style.css"> -->

		<!-- Demo purpose only: goes with demo.js, you can delete this css when designing your own WebApp -->
		<link rel="stylesheet" type="text/css" media="screen" href="css/demo.css">

		<!-- FAVICONS -->
		<link rel="shortcut icon" href="img/favicon/favicon.ico" type="image/x-icon">
		<link rel="icon" href="img/favicon/favicon.ico" type="image/x-icon">

		<!-- GOOGLE FONT -->
		<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,300,400,700">

		<style>
			.show-grid [class^="col-"] {
				padding-top: 10px;
				padding-bottom: 10px;
				background-color: rgba(61, 106, 124, 0.15);
				border: 1px solid rgba(61, 106, 124, 0.2);
			}
		
			.show-grid {
				margin-bottom: 15px;
			}
			
			th small {
				font-size:12px;
				display:block;
				color:#8D8D8D;
				font-weight:normal;
			}
			
			/*
			 * Responsive tests
			 *
			 * Generate a set of tests to show the responsive utilities in action.
			 */
			
			/* Responsive (scrollable) doc tables */
			.table-responsive .highlight pre {
			  white-space: normal;
			}
			
			/* Utility classes table  */
			.bs-table th small,
			.responsive-utilities th small {
			  display: block;
			  font-weight: normal;
			  color: #999;
			  font-size:12px;
			}
			.responsive-utilities tbody th {
			  font-weight: normal;
			}
			.responsive-utilities td {
			  text-align: center;
			}
			.responsive-utilities td.is-visible {
			  color: rgba(61, 106, 124, 1);
			  background-color: rgba(61, 106, 124, 0.07) !important;
			}
			.responsive-utilities td.is-hidden {
			  color: #ccc;
			  background-color: #f9f9f9 !important;
			}
			
			/* Responsive tests */
			.responsive-utilities-test {
			  margin-top: 5px;
			}
			.responsive-utilities-test .col-xs-6 {
			  margin-bottom: 10px;
			}
			.responsive-utilities-test span {
			  padding: 15px 10px;
			  font-size: 14px;
			  font-weight: bold;
			  line-height: 1.1;
			  text-align: center;
			  border-radius: 4px;
			}
			.visible-on .col-xs-6 .hidden-xs,
			.visible-on .col-xs-6 .hidden-sm,
			.visible-on .col-xs-6 .hidden-md,
			.visible-on .col-xs-6 .hidden-lg,
			.hidden-on .col-xs-6 .visible-xs,
			.hidden-on .col-xs-6 .visible-sm,
			.hidden-on .col-xs-6 .visible-md,
			.hidden-on .col-xs-6 .visible-lg {
			  color: #999;
			  border: 1px solid #ddd;
			}
			.visible-on .col-xs-6 .visible-xs,
			.visible-on .col-xs-6 .visible-sm,
			.visible-on .col-xs-6 .visible-md,
			.visible-on .col-xs-6 .visible-lg,
			.hidden-on .col-xs-6 .hidden-xs,
			.hidden-on .col-xs-6 .hidden-sm,
			.hidden-on .col-xs-6 .hidden-md,
			.hidden-on .col-xs-6 .hidden-lg {
			  color: #468847;
			  background-color: #dff0d8;
			  border: 1px solid #d6e9c6;
			}
		</style>

	</head>
	<body class="">
		<!-- possible classes: minified, fixed-ribbon, fixed-header, fixed-width-->

		<!-- HEADER -->
		<header id="header">
			<div id="logo-group">

				<!-- PLACE YOUR LOGO HERE -->
				<span id="logo"> <img src="img/logo.png" alt="SmartAdmin"> </span>
				<!-- END LOGO PLACEHOLDER -->

				<!-- Note: The activity badge color changes when clicked and resets the number to 0
				Suggestion: You may want to set a flag when this happens to tick off all checked messages / notifications -->
				<span id="activity" class="activity-dropdown"> <i class="fa fa-user"></i> <b class="badge"> 21 </b> </span>

				<!-- AJAX-DROPDOWN : control this dropdown height, look and feel from the LESS variable file -->
				<div class="ajax-dropdown">

					<!-- the ID links are fetched via AJAX to the ajax container "ajax-notifications" -->
					<div class="btn-group btn-group-justified" data-toggle="buttons">
						<label class="btn btn-default">
							<input type="radio" name="activity" id="ajax/notify/mail.html">
							Msgs (14) </label>
						<label class="btn btn-default">
							<input type="radio" name="activity" id="ajax/notify/notifications.html">
							notify (3) </label>
						<label class="btn btn-default">
							<input type="radio" name="activity" id="ajax/notify/tasks.html">
							Tasks (4) </label>
					</div>

					<!-- notification content -->
					<div class="ajax-notifications custom-scroll">

						<div class="alert alert-transparent">
							<h4>Click a button to show messages here</h4>
							This blank page message helps protect your privacy, or you can show the first message here automatically.
						</div>

						<i class="fa fa-lock fa-4x fa-border"></i>

					</div>
					<!-- end notification content -->

					<!-- footer: refresh area -->
					<span> Last updated on: 12/12/2013 9:43AM
						<button type="button" data-loading-text="<i class='fa fa-refresh fa-spin'></i> Loading..." class="btn btn-xs btn-default pull-right">
							<i class="fa fa-refresh"></i>
						</button> </span>
					<!-- end footer -->

				</div>
				<!-- END AJAX-DROPDOWN -->
			</div>

			<!-- projects dropdown -->
			<div id="project-context">

				<span class="label">Projects:</span>
				<span id="project-selector" class="popover-trigger-element dropdown-toggle" data-toggle="dropdown">Recent projects <i class="fa fa-angle-down"></i></span>

				<!-- Suggestion: populate this list with fetch and push technique -->
				<ul class="dropdown-menu">
					<li>
						<a href="javascript:void(0);">Online e-merchant management system - attaching integration with the iOS</a>
					</li>
					<li>
						<a href="javascript:void(0);">Notes on pipeline upgradee</a>
					</li>
					<li>
						<a href="javascript:void(0);">Assesment Report for merchant account</a>
					</li>
					<li class="divider"></li>
					<li>
						<a href="javascript:void(0);"><i class="fa fa-power-off"></i> Clear</a>
					</li>
				</ul>
				<!-- end dropdown-menu-->

			</div>
			<!-- end projects dropdown -->

			<!-- pulled right: nav area -->
			<div class="pull-right">

				<!-- collapse menu button -->
				<div id="hide-menu" class="btn-header pull-right">
					<span> <a href="javascript:void(0);" title="Collapse Menu"><i class="fa fa-reorder"></i></a> </span>
				</div>
				<!-- end collapse menu -->

				<!-- logout button -->
				<div id="logout" class="btn-header transparent pull-right">
					<span> <a href="login.html" title="Sign Out"><i class="fa fa-sign-out"></i></a> </span>
				</div>
				<!-- end logout button -->

				<!-- search mobile button (this is hidden till mobile view port) -->
				<div id="search-mobile" class="btn-header transparent pull-right">
					<span> <a href="javascript:void(0)" title="Search"><i class="fa fa-search"></i></a> </span>
				</div>
				<!-- end search mobile button -->

				<!-- input: search field -->
				<form action="#search.html" class="header-search pull-right">
					<input type="text" placeholder="Find reports and more" id="search-fld">
					<button type="submit">
						<i class="fa fa-search"></i>
					</button>
					<a href="javascript:void(0);" id="cancel-search-js" title="Cancel Search"><i class="fa fa-times"></i></a>
				</form>
				<!-- end input: search field -->

				<!-- multiple lang dropdown : find all flags in the image folder -->
				<ul class="header-dropdown-list hidden-xs">
					<li>
						<a href="#" class="dropdown-toggle" data-toggle="dropdown"> <img alt="" src="img/flags/us.png"> <span> US </span> <i class="fa fa-angle-down"></i> </a>
						<ul class="dropdown-menu pull-right">
							<li class="active">
								<a href="javascript:void(0);"><img alt="" src="img/flags/us.png"> US</a>
							</li>
							<li>
								<a href="javascript:void(0);"><img alt="" src="img/flags/es.png"> Spanish</a>
							</li>
							<li>
								<a href="javascript:void(0);"><img alt="" src="img/flags/de.png"> German</a>
							</li>
						</ul>
					</li>
				</ul>
				<!-- end multiple lang -->

			</div>
			<!-- end pulled right: nav area -->

		</header>
		<!-- END HEADER -->

		<!-- Left panel : Navigation area -->
		<!-- Note: This width of the aside area can be adjusted through LESS variables -->
		<aside id="left-panel">

			<!-- User info -->
			<div class="login-info">
				<span> <!-- User image size is adjusted inside CSS, it should stay as it --> 
					
					<a href="javascript:void(0);" id="show-shortcut">
						<img src="img/avatars/sunny.png" alt="me" class="online" /> 
						<span>
							john.doe 
						</span>
						<i class="fa fa-angle-down"></i>
					</a> 
					
				</span>
			</div>
			<!-- end user info -->

			<!-- NAVIGATION : This navigation is also responsive

			To make this navigation dynamic please make sure to link the node
			(the reference to the nav > ul) after page load. Or the navigation
			will not initialize.
			-->
			<nav>
				<!-- NOTE: Notice the gaps after each icon usage <i></i>..
				Please note that these links work a bit different than
				traditional hre="" links. See documentation for details.
				-->

				<ul>
					<li>
						<a href="index.html" title="Dashboard"><i class="fa fa-lg fa-fw fa-home"></i> <span class="menu-item-parent">Dashboard</span></a>
					</li>
					<li>
						<a href="inbox.html"><i class="fa fa-lg fa-fw fa-inbox"></i> <span class="menu-item-parent">Inbox</span><span class="badge pull-right inbox-badge">14</span></a>
					</li>
					<li>
						<a href="#"><i class="fa fa-lg fa-fw fa-bar-chart-o"></i> <span class="menu-item-parent">Graphs</span></a>
						<ul>
							<li>
								<a href="flot.html">Flot Chart</a>
							</li>
							<li>
								<a href="morris.html">Morris Charts</a>
							</li>
							<li>
								<a href="inline-charts.html">Inline Charts</a>
							</li>
						</ul>
					</li>
					<li>
						<a href="#"><i class="fa fa-lg fa-fw fa-table"></i> <span class="menu-item-parent">Tables</span></a>
						<ul>
							<li>
								<a href="table.html">Normal Tables</a>
							</li>
							<li>
								<a href="datatables.html">Data Tables</a>
							</li>
						</ul>
					</li>
					<li>
						<a href="#"><i class="fa fa-lg fa-fw fa-pencil-square-o"></i> <span class="menu-item-parent">Forms</span></a>
						<ul>
							<li>
								<a href="form-elements.html">Smart Form Elements</a>
							</li>
							<li>
								<a href="form-templates.html">Smart Form Layouts</a>
							</li>
							<li>
								<a href="validation.html">Smart Form Validation</a>
							</li>
							<li>
								<a href="bootstrap-forms.html">Bootstrap Form Elements</a>
							</li>
							<li>
								<a href="plugins.html">Form Plugins</a>
							</li>
							<li>
								<a href="wizard.html">Wizards</a>
							</li>
							<li>
								<a href="other-editors.html">Bootstrap Editors</a>
							</li>
							<li>
								<a href="dropzone.html">Dropzone <span class="badge pull-right inbox-badge bg-color-yellow">new</span></a>
							</li>
						</ul>
					</li>
					<li>
						<a href="#"><i class="fa fa-lg fa-fw fa-desktop"></i> <span class="menu-item-parent">UI Elements</span></a>
						<ul>
							<li>
								<a href="general-elements.html">General Elements</a>
							</li>
							<li>
								<a href="buttons.html">Buttons</a>
							</li>
							<li>
								<a href="#">Icons</a>
								<ul>
									<li>
										<a href="fa.html"><i class="fa fa-plane"></i> Font Awesome</a>
									</li>	
									<li>
										<a href="glyph.html"><i class="glyphicon glyphicon-plane"></i> Glyph Icons </a>
									</li>
								</ul>
							</li>
							<li class="active">
								<a href="grid.html">Grid</a>
							</li>
							<li>
								<a href="treeview.html">Tree View</a>
							</li>
							<li>
								<a href="nestable-list.html">Nestable Lists</a>
							</li>
							<li>
								<a href="jqui.html">JQuery UI</a>
							</li>
						</ul>
					</li>
					<li>
						<a href="#"><i class="fa fa-lg fa-fw fa-folder-open"></i> <span class="menu-item-parent">6 Level Navigation</span></a>
						<ul>
							<li>
								<a href="#"><i class="fa fa-fw fa-folder-open"></i> 2nd Level</a>
								<ul>
									<li>
										<a href="#"><i class="fa fa-fw fa-folder-open"></i> 3ed Level </a>
										<ul>
											<li>
												<a href="#"><i class="fa fa-fw fa-file-text"></i> File</a>
											</li>
											<li>
												<a href="#"><i class="fa fa-fw fa-folder-open"></i> 4th Level</a>
												<ul>
													<li>
														<a href="#"><i class="fa fa-fw fa-file-text"></i> File</a>
													</li>
													<li>
														<a href="#"><i class="fa fa-fw fa-folder-open"></i> 5th Level</a>
														<ul>
															<li>
																<a href="#"><i class="fa fa-fw fa-file-text"></i> File</a>
															</li>
															<li>
																<a href="#"><i class="fa fa-fw fa-file-text"></i> File</a>
															</li>
														</ul>
													</li>
												</ul>
											</li>
										</ul>
									</li>
								</ul>
							</li>
							<li>
								<a href="#"><i class="fa fa-fw fa-folder-open"></i> Folder</a>

								<ul>
									<li>
										<a href="#"><i class="fa fa-fw fa-folder-open"></i> 3ed Level </a>
										<ul>
											<li>
												<a href="#"><i class="fa fa-fw fa-file-text"></i> File</a>
											</li>
											<li>
												<a href="#"><i class="fa fa-fw fa-file-text"></i> File</a>
											</li>
										</ul>
									</li>
								</ul>

							</li>
						</ul>
					</li>
					<li>
						<a href="calendar.html"><i class="fa fa-lg fa-fw fa-calendar"><em>3</em></i> <span class="menu-item-parent">Calendar</span></a>
					</li>
					<li>
						<a href="widgets.html"><i class="fa fa-lg fa-fw fa-list-alt"></i> <span class="menu-item-parent">Widgets</span></a>
					</li>
					<li>
						<a href="gallery.html"><i class="fa fa-lg fa-fw fa-picture-o"></i> <span class="menu-item-parent">Gallery</span></a>
					</li>
					<li>
						<a href="gmap-xml.html"><i class="fa fa-lg fa-fw fa-map-marker"></i> <span class="menu-item-parent">Google Map Skins</span><span class="badge bg-color-greenLight pull-right inbox-badge">9</span></a>
					</li>
					<li>
						<a href="#"><i class="fa fa-lg fa-fw fa-windows"></i> <span class="menu-item-parent">Miscellaneous</span></a>
						<ul>
							<li>
								<a href="typography.html">Typography</a>
							</li>
							<li>
								<a href="pricing-table.html">Pricing Tables</a>
							</li>
							<li>
								<a href="invoice.html">Invoice</a>
							</li>
							<li>
								<a href="login.html" target="_top">Login</a>
							</li>
							<li>
								<a href="register.html" target="_top">Register</a>
							</li>
							<li>
								<a href="lock.html" target="_top">Locked Screen</a>
							</li>
							<li>
								<a href="error404.html">Error 404</a>
							</li>
							<li>
								<a href="error500.html">Error 500</a>
							</li>
							<li>
								<a href="blank_.html">Blank Page</a>
							</li>
							<li>
								<a href="email-template.html">Email Template</a>
							</li>
							<li>
								<a href="search.html">Search Page</a>
							</li>
							<li>
								<a href="ckeditor.html">CK Editor</a>
							</li>
						</ul>
					</li>
					<li>
						<a href="#"><i class="fa fa-lg fa-fw fa-file"></i> <span class="menu-item-parent">Other Pages</span></a>
						<ul>
							<li>
								<a href="forum.html">Forum Layout</a>
							</li>
							<li>
								<a href="profile.html">Profile</a>
							</li>
							<li>
								<a href="timeline.html">Timeline</a>
							</li>
						</ul>
					</li>
				</ul>
			</nav>
			<span class="minifyme"> <i class="fa fa-arrow-circle-left hit"></i> </span>

		</aside>
		<!-- END NAVIGATION -->

		<!-- MAIN PANEL -->
		<div id="main" role="main">

			<!-- RIBBON -->
			<div id="ribbon">

				<span class="ribbon-button-alignment"> <span id="refresh" class="btn btn-ribbon" data-title="refresh"  rel="tooltip" data-placement="bottom" data-original-title="<i class='text-warning fa fa-warning'></i> Warning! This will reset all your widget settings." data-html="true"><i class="fa fa-refresh"></i></span> </span>

				<!-- breadcrumb -->
				<ol class="breadcrumb">
					<li>
						UI Elements
					</li>
					<li>
						Grid
					</li>
				</ol>
				<!-- end breadcrumb -->

				<!-- You can also add more buttons to the
				ribbon for further usability

				Example below:

				<span class="ribbon-button-alignment pull-right">
				<span id="search" class="btn btn-ribbon hidden-xs" data-title="search"><i class="fa-grid"></i> Change Grid</span>
				<span id="add" class="btn btn-ribbon hidden-xs" data-title="add"><i class="fa-plus"></i> Add</span>
				<span id="search" class="btn btn-ribbon" data-title="search"><i class="fa-search"></i> <span class="hidden-mobile">Search</span></span>
				</span> -->

			</div>
			<!-- END RIBBON -->

			<!-- MAIN CONTENT -->
			<div id="content">

				<div class="well">
					<h1>Grid options</h1>
					<p>
						See how aspects of the Bootstrap grid system work across multiple devices with a handy table.
						<br>
						<br>
					</p>
				
				<div class="row">
					
					<div class="col-sm-3">
				
						<img src="img/demo/responseimg.png" alt="" style="max-width:300px; width:100%;">
						
							<br>
							<h3>BuiltWith Bootstrap</h3>
							Bootstrap is made to not only look and behave great in the latest desktop browsers, 
							but in tablet and smartphone browsers too. It’s packed with great features. Such as the 12-column responsive mobile first grid, 
							dozens of components, plugins and more!
						
					</div>
					<div class="col-sm-9">
				
						<table class="table table-bordered table-striped">
							<thead>
								<tr>
									<th></th>
									<th> Extra small devices <small>Phones (&lt;768px)</small></th>
									<th> Small devices <small>Tablets (≥768px)</small></th>
									<th> Medium devices <small>Desktops (≥992px)</small></th>
									<th> Large devices <small>Desktops (≥1200px)</small></th>
								</tr>
							</thead>
							<tbody>
								<tr>
									<th>Grid behavior</th>
									<td>Horizontal at all times</td>
									<td colspan="3">Collapsed to start, horizontal above breakpoints</td>
								</tr>
								<tr>
									<th>Max container width</th>
									<td>None (auto)</td>
									<td>750px</td>
									<td>970px</td>
									<td>1170px</td>
								</tr>
								<tr>
									<th>Class prefix</th>
									<td>
									<code>
										.col-xs-
									</code></td>
									<td>
									<code>
										.col-sm-
									</code></td>
									<td>
									<code>
										.col-md-
									</code></td>
									<td>
									<code>
										.col-lg-
									</code></td>
								</tr>
								<tr>
									<th># of columns</th>
									<td colspan="4">12</td>
								</tr>
								<tr>
									<th>Max column width</th>
									<td class="text-muted">Auto</td>
									<td>60px</td>
									<td>78px</td>
									<td>95px</td>
								</tr>
								<tr>
									<th>Gutter width</th>
									<td colspan="4">30px (15px on each side of a column)</td>
								</tr>
								<tr>
									<th>Nestable</th>
									<td colspan="4">Yes</td>
								</tr>
								<tr>
									<th>Offsets</th>
									<td colspan="1" class="text-muted">N/A</td>
									<td colspan="3">Yes</td>
								</tr>
								<tr>
									<th>Column ordering</th>
									<td class="text-muted">N/A</td>
									<td colspan="3">Yes</td>
								</tr>
							</tbody>
						</table>
				
						
					</div>
					
				</div>
				
				
				</div>
				
				<h6>Example: Stacked-to-horizontal</h6>
				<p>
					Using a single set of <code>
						.col-md-*</code>
					grid classes, you can create a basic grid system that starts out stacked on mobile devices and tablet devices (the extra small to small range) before becoming horizontal on desktop (medium) devices.
				</p>
				
				<div class="well">
				
					<div class="row show-grid">
						<div class="col-md-1">
							.col-md-1
						</div>
						<div class="col-md-1">
							.col-md-1
						</div>
						<div class="col-md-1">
							.col-md-1
						</div>
						<div class="col-md-1">
							.col-md-1
						</div>
						<div class="col-md-1">
							.col-md-1
						</div>
						<div class="col-md-1">
							.col-md-1
						</div>
						<div class="col-md-1">
							.col-md-1
						</div>
						<div class="col-md-1">
							.col-md-1
						</div>
						<div class="col-md-1">
							.col-md-1
						</div>
						<div class="col-md-1">
							.col-md-1
						</div>
						<div class="col-md-1">
							.col-md-1
						</div>
						<div class="col-md-1">
							.col-md-1
						</div>
					</div>
				
					<div class="row show-grid">
						<div class="col-md-8">
							.col-md-8
						</div>
						<div class="col-md-4">
							.col-md-4
						</div>
					</div>
				
					<div class="row show-grid">
						<div class="col-md-4">
							.col-md-4
						</div>
						<div class="col-md-4">
							.col-md-4
						</div>
						<div class="col-md-4">
							.col-md-4
						</div>
					</div>
				
					<div class="row show-grid">
						<div class="col-md-6">
							.col-md-6
						</div>
						<div class="col-md-6">
							.col-md-6
						</div>
					</div>
				
				</div>
				
				<h6>Example: Mobile and desktop</h6>
				<p>Don't want your columns to simply stack in smaller devices? Use the extra small and medium device grid classes by adding <code>.col-xs-*</code> <code>.col-md-*</code> to your columns. See the example below for a better idea of how it all works.</p>
				
				<div class="well">
					
					  <div class="row show-grid">
				        <div class="col-xs-12 col-md-8">.col-xs-12 col-md-8</div>
				        <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
				      </div>
				
					  <div class="row show-grid">
				        <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
				        <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
				        <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
				      </div>
				
					  <div class="row show-grid">
				        <div class="col-xs-6">.col-xs-6</div>
				        <div class="col-xs-6">.col-xs-6</div>
				      </div>
					
				</div>
				
				<h6>Example: Mobile, tablet, desktops</h6>
				<p>Build on the previous example by creating even more dynamic and powerful layouts with tablet <code>.col-sm-*</code> classes.</p>
				
				<div class="well">
					<div class="row show-grid">
				        <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
				        <div class="col-xs-6 col-sm-6 col-md-4">.col-xs-6 .col-sm-6 .col-md-4</div>
				      </div>
				      
				<div class="row show-grid">
				        <div class="col-xs-6 col-sm-4 col-md-4">.col-xs-6 .col-sm-4 .col-md-4</div>
				        <div class="col-xs-6 col-sm-4 col-md-4">.col-xs-6 .col-sm-4 .col-md-4</div>
				        <!-- Optional: clear the XS cols if their content doesn't match in height -->
				        <div class="clearfix visible-xs"></div>
				        <div class="col-xs-6 col-sm-4 col-md-4">.col-xs-6 .col-sm-4 .col-md-4</div>
				      </div>
				</div>
				
				<h6>Offsetting columns</h6>
				<p>Move columns to the right using <code>.col-md-offset-*</code> classes. These classes increase the left margin of a column by <code>*</code> columns. For example, <code>.col-md-offset-4</code> moves <code>.col-md-4</code> over four columns.</p>
				
				<div class="well">
					
					<div class="row show-grid">
				        <div class="col-md-4">.col-md-4</div>
				        <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
				      </div>
				      
				      <div class="row show-grid">
				        <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
				        <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
				      </div>
				      
				      <div class="row show-grid">
				        <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
				      </div>
					
				</div>
				
				<h6>Nesting columns</h6>
				<p>To nest your content with the default grid, add a new <code>.row</code> and set of <code>.col-md-*</code> columns within an existing <code>.col-md-*</code> column. Nested rows should include a set of columns that add up to 12.</p>
				
				<div class="well">
					
					<div class="row show-grid">
				      <div class="col-md-12">
				        Level 1: .col-md-12
				        <div class="row show-grid">
				          <div class="col-md-6">
				            Level 2: .col-md-6
				          </div>
				          <div class="col-md-6">
				            Level 2: .col-md-6
				          </div>
				        </div>
				      </div>
				    </div>
					
				</div>
				
				<hr class="simple">
				
				<div class="well">
				
				      <h1>Responsive utilities</h1>
				
					<p class="alert alert-info">
						<strong>
						For faster mobile-friendly development, use these utility classes for showing and hiding content by device via media query. Also included are utility classes for toggling content when printed.
						</strong>
					</p>
					
					<p>Try to use these on a limited basis and avoid creating entirely different versions of the same site. Instead, use them to complement each device's presentation. <strong>Responsive utilities are currently only available for block and table toggling.</strong> Use with inline and table elements is currently not supported.</p>
					
					
					<h3>Available classes</h3>
					
					<p>Use a single or combination of the available classes for toggling content across viewport breakpoints.</p>
				
				<table class="table table-bordered table-striped responsive-utilities">
				        <thead>
				          <tr>
				            <th></th>
				            <th>
				              Extra small devices
				              <small>Phones (&lt;768px)</small>
				            </th>
				            <th>
				              Small devices
				              <small>Tablets (≥768px)</small>
				            </th>
				            <th>
				              Medium devices
				              <small>Desktops (≥992px)</small>
				            </th>
				            <th>
				              Large devices
				              <small>Desktops (≥1200px)</small>
				            </th>
				          </tr>
				        </thead>
				        <tbody>
				          <tr>
				            <th><code>.visible-xs</code></th>
				            <td class="is-visible">Visible</td>
				            <td class="is-hidden">Hidden</td>
				            <td class="is-hidden">Hidden</td>
				            <td class="is-hidden">Hidden</td>
				          </tr>
				          <tr>
				            <th><code>.visible-sm</code></th>
				            <td class="is-hidden">Hidden</td>
				            <td class="is-visible">Visible</td>
				            <td class="is-hidden">Hidden</td>
				            <td class="is-hidden">Hidden</td>
				          </tr>
				          <tr>
				            <th><code>.visible-md</code></th>
				            <td class="is-hidden">Hidden</td>
				            <td class="is-hidden">Hidden</td>
				            <td class="is-visible">Visible</td>
				            <td class="is-hidden">Hidden</td>
				          </tr>
				          <tr>
				            <th><code>.visible-lg</code></th>
				            <td class="is-hidden">Hidden</td>
				            <td class="is-hidden">Hidden</td>
				            <td class="is-hidden">Hidden</td>
				            <td class="is-visible">Visible</td>
				          </tr>
				        </tbody>
				        <tbody>
				          <tr>
				            <th><code>.hidden-xs</code></th>
				            <td class="is-hidden">Hidden</td>
				            <td class="is-visible">Visible</td>
				            <td class="is-visible">Visible</td>
				            <td class="is-visible">Visible</td>
				          </tr>
				          <tr>
				            <th><code>.hidden-sm</code></th>
				            <td class="is-visible">Visible</td>
				            <td class="is-hidden">Hidden</td>
				            <td class="is-visible">Visible</td>
				            <td class="is-visible">Visible</td>
				          </tr>
				          <tr>
				            <th><code>.hidden-md</code></th>
				            <td class="is-visible">Visible</td>
				            <td class="is-visible">Visible</td>
				            <td class="is-hidden">Hidden</td>
				            <td class="is-visible">Visible</td>
				          </tr>
				          <tr>
				            <th><code>.hidden-lg</code></th>
				            <td class="is-visible">Visible</td>
				            <td class="is-visible">Visible</td>
				            <td class="is-visible">Visible</td>
				            <td class="is-hidden">Hidden</td>
				          </tr>
				        </tbody>
				      </table>
					
				</div>


			</div>
			<!-- END MAIN CONTENT -->

		</div>
		<!-- END MAIN PANEL -->

		<!-- SHORTCUT AREA : With large tiles (activated via clicking user name tag)
		Note: These tiles are completely responsive,
		you can add as many as you like
		-->
		<div id="shortcut">
			<ul>
				<li>
					<a href="#inbox.html" class="jarvismetro-tile big-cubes bg-color-blue"> <span class="iconbox"> <i class="fa fa-envelope fa-4x"></i> <span>Mail <span class="label pull-right bg-color-darken">14</span></span> </span> </a>
				</li>
				<li>
					<a href="#calendar.html" class="jarvismetro-tile big-cubes bg-color-orangeDark"> <span class="iconbox"> <i class="fa fa-calendar fa-4x"></i> <span>Calendar</span> </span> </a>
				</li>
				<li>
					<a href="#gmap-xml.html" class="jarvismetro-tile big-cubes bg-color-purple"> <span class="iconbox"> <i class="fa fa-map-marker fa-4x"></i> <span>Maps</span> </span> </a>
				</li>
				<li>
					<a href="#invoice.html" class="jarvismetro-tile big-cubes bg-color-blueDark"> <span class="iconbox"> <i class="fa fa-book fa-4x"></i> <span>Invoice <span class="label pull-right bg-color-darken">99</span></span> </span> </a>
				</li>
				<li>
					<a href="#gallery.html" class="jarvismetro-tile big-cubes bg-color-greenLight"> <span class="iconbox"> <i class="fa fa-picture-o fa-4x"></i> <span>Gallery </span> </span> </a>
				</li>
				<li>
					<a href="javascript:void(0);" class="jarvismetro-tile big-cubes selected bg-color-pinkDark"> <span class="iconbox"> <i class="fa fa-user fa-4x"></i> <span>My Profile </span> </span> </a>
				</li>
			</ul>
		</div>
		<!-- END SHORTCUT AREA -->

		<!--================================================== -->

		<!-- PACE LOADER - turn this on if you want ajax loading to show (caution: uses lots of memory on iDevices)-->
		<script data-pace-options='{ "restartOnRequestAfter": true }' src="js/plugin/pace/pace.min.js"></script>

		<!-- Link to Google CDN's jQuery + jQueryUI; fall back to local -->

		<script>
			if (!window.jQuery) {
				document.write('<script src="js/libs/jquery-2.0.2.min.js"><\/script>');
			}
		</script>


		<script>
			if (!window.jQuery.ui) {
				document.write('<script src="js/libs/jquery-ui-1.10.3.min.js"><\/script>');
			}
		</script>

		<!-- JS TOUCH : include this plugin for mobile drag / drop touch events
		<script src="js/plugin/jquery-touch/jquery.ui.touch-punch.min.js"></script> -->

		<!-- BOOTSTRAP JS -->
		<script src="js/bootstrap/bootstrap.min.js"></script>

		<!-- CUSTOM NOTIFICATION -->
		<script src="js/notification/SmartNotification.min.js"></script>

		<!-- JARVIS WIDGETS -->
		<script src="js/smartwidgets/jarvis.widget.min.js"></script>

		<!-- EASY PIE CHARTS -->
		<script src="js/plugin/easy-pie-chart/jquery.easy-pie-chart.min.js"></script>

		<!-- SPARKLINES -->
		<script src="js/plugin/sparkline/jquery.sparkline.min.js"></script>

		<!-- JQUERY VALIDATE -->
		<script src="js/plugin/jquery-validate/jquery.validate.min.js"></script>

		<!-- JQUERY MASKED INPUT -->
		<script src="js/plugin/masked-input/jquery.maskedinput.min.js"></script>

		<!-- JQUERY SELECT2 INPUT -->
		<script src="js/plugin/select2/select2.min.js"></script>

		<!-- JQUERY UI + Bootstrap Slider -->
		<script src="js/plugin/bootstrap-slider/bootstrap-slider.min.js"></script>

		<!-- browser msie issue fix -->
		<script src="js/plugin/msie-fix/jquery.mb.browser.min.js"></script>

		<!-- FastClick: For mobile devices -->
		<script src="js/plugin/fastclick/fastclick.js"></script>

		<!--[if IE 7]>

		<h1>Your browser is out of date, please update your browser by going to www.microsoft.com/download</h1>

		<![endif]-->

		<!-- Demo purpose only -->
		<script src="js/demo.js"></script>

		<!-- MAIN APP JS FILE -->
		<script src="js/app.js"></script>

		<!-- PAGE RELATED PLUGIN(S) 
		<script src="..."></script>-->

		

		<script type="text/javascript">
		
		// DO NOT REMOVE : GLOBAL FUNCTIONS!
		
		$(document).ready(function() {
			
			pageSetUp();
			
			
	
			
		
		
		})

		</script>


		    </body>

</html>